<template>
  <div class="structure-info">
    <div class="close-overlay">
      <img src="@/assets/gis/delete.png" @click="hideInfo">
    </div>
    <div class="item">
      <div class="title">构造物名称:&nbsp;</div>
      <div class="value">{{ structureInfo.structureName }}</div>
    </div>
    <div class="item">
      <div class="title">构造物种类:&nbsp;</div>
      <div class="value">{{ structureInfo.strType }}</div>
    </div>
    <div class="item">
      <div class="title">所属航段:&nbsp;</div>
      <div class="value">{{ structureInfo.roadSection }}</div>
    </div>
    <div class="item" style="margin-bottom: 10px">
      <div class="title">图片:&nbsp;</div>
      <img
        v-for="(item, index) in structureInfo.imgList"
        :key="index"
        :src="item"
        @click="showBigImage(item)"
      >
      <p v-if="!structureInfo.imgList">暂无图片</p>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs, watch } from 'vue'
export default {
  name: 'QuestionInfo',
  props: {
    info: {
      type: Object,
      default: () => { }
    }
  },
  emits: ['hide', 'showbig'],
  setup(props, { emit }) {
    const data = reactive({
      structureInfo: {}
    })

    watch(() => props.info, (value) => {
      if (JSON.stringify(value) !== '{}') {
        if (value !== null) {
          let strType = ''
          switch (parseInt(value?.structureType)) {
            case 1:
              strType = '港口'
              break
            case 2:
              strType = '码头'
              break
            case 3:
              strType = '船闸'
              break
            case 4:
              strType = '服务区'
              break
            case 5:
              strType = '加油站'
              break
            case 6:
              strType = '桥梁'
              break
            case 7:
              strType = '通航建筑物'
              break
            default:
              break
          }

          let imgRes = []
          if (value?.imageUrl) {
            let imgUrl = null
            imgUrl = value?.imageUrl
            imgRes = imgUrl.split(',')
          }

          data.structureInfo = {
            structureName: value?.structureName || null,
            strType: strType,
            roadSection: value?.legRange,
            imgList: imgRes.length ? imgRes : null
          }
        }
      }
    })

    // 大图显示
    const showBigImage = (src) => {
      emit('showbig', src)
    }

    // 隐藏弹框
    const hideInfo = () => {
      emit('hide')
    }

    return {
      ...toRefs(data),
      hideInfo,
      showBigImage
    }
  }
}
</script>

  <style lang="scss" scoped>
  .structure-info {
    background-color: rgba(60, 66, 86, 1);
    border-radius: 6px;
    max-width: 360px;
    padding: 9px 15px;
    .close-overlay {
      width: 100%;
      height: 9px;
      position: relative;
      cursor: pointer;
      img {
        width: 12px;
        height: 12px;
        position: absolute;
        top: -3px;
        right: -6px;
      };
      
    }
    .item {
      position: relative;
      font-size: 14px;
      color: #fff;
      padding-left: 90px;
      .title {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 80px;
        text-align: right;
      }
      .questiontitle {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 70px;
        text-align: right;
      }
      .clusterNumber {
        width: 80px;
      }
      img {
        width: 67px;
        height: 37px;
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }

  .mock{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.3);
    display:flex;
    justify-content:center;
    align-items:center;
  }
  </style>

